<template>
	<view class="manage-module">
		<!-- 管理模块 -->
		<view class="manage-module-container">
			<view class="manage-module-title">
				<image class="manage-module-title-image" :src="manageModule.manageIcon"></image>
				<text style="font-weight: bold;">{{manageModule.manageName}}</text>
			</view>
			<uni-grid class="manage-module-grid" :column="3" :highlight="true">
				<uni-grid-item v-for="(item, index) in manageModule.manageGrids" :index="index" :key="index" @click="handleManageGridClick(item)">
					<view class="manage-module-grid-item">
						<image class="manage-module-grid-item-icon" :src="item.gridIcon"></image>
						<text class="text">{{item.gridName}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>
	
<script setup>
	defineProps({
		manageModule:{
			type:Object,
			default(){
				return {
					manageName: '默认名称',
					manageIcon: '',
					manageGrids:[
						{gridIcon:'',gridName:'', gridNavigateUrl:''}
					]
				}
			}
		}
	});
	
	//点击跳转事件
	const handleManageGridClick = (item) => {
		if (item.gridNavigateUrl) {
			uni.navigateTo({
				url: item.gridNavigateUrl
			});
		}
	};
</script>

<style lang="scss" scoped>
	.manage-module{
		.manage-module-container{
			padding: 20rpx;
			.manage-module-title{
				display: flex;
				align-items: center;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.manage-module-title-image{
					margin-right: 20rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
			.manage-module-grid{
				display: flex;
				.uni-grid-item{
					.manage-module-grid-item{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						height: 100%; // 让子项占满父项的高度
						.manage-module-grid-item-icon{
							padding-bottom: 30rpx;
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
		
	}
</style>